<template>
  <a-modal class="anchor-info" :title="type ? '审核' : '详情'" :visible="value" :maskClosable="false" @cancel="onCancel">
    <a-descriptions>
      <a-descriptions-item label="申请时间" :span="3">{{ anchorDesc.applyTime || '无' }}</a-descriptions-item>
      <a-descriptions-item label="申请人类型" :span="3">{{ anchorDesc.applyTypeDesc || '无' }}</a-descriptions-item>
      <a-descriptions-item label="申请人姓名" :span="3">{{ anchorDesc.name || '无' }}</a-descriptions-item>
      <a-descriptions-item label="申请人手机号" :span="3">{{ anchorDesc.phoneNumber || '无' }}</a-descriptions-item>
      <a-descriptions-item label="申请人身份证号" :span="3">{{ anchorDesc.idCard || '无' }}</a-descriptions-item>
      <a-descriptions-item label="当前在播平台" :span="3">{{ anchorDesc.platform || '无' }}</a-descriptions-item>
      <a-descriptions-item label="渠道经理" :span="3" v-if="type ? true : false">
        <a-select @search="getAllUserFun" @change="choosePerson" v-model="chooseId" :showArrow="false" style="width:200px;" show-search :filter-option="false" allow-clear placeholder="请输入渠道经理">
          <a-spin v-if="userLoading" slot="notFoundContent" size="small" />
          <a-select-option v-for="(item, index) in allUser" :key="index" :value="item.userId">{{ item.userName }}</a-select-option>
        </a-select>
      </a-descriptions-item>
      <div>
        <label for="身份证照片">身份证照片:</label>
        <div class="img-top-box" v-show="anchorDesc.idCardFrontUrl || anchorDesc.idCardBackUrl">
          <upload disabled :limit="2" :value="[anchorDesc.idCardFrontUrl, anchorDesc.idCardBackUrl]"></upload>
        </div>
        <span v-show="!anchorDesc.idCardBackUrl && !anchorDesc.idCardFrontUrl">无</span>
      </div>
      <!-- <a-descriptions-item label="身份证照片" :span="3">
        <div class="img-top-box">
          <upload v-show="anchorDesc.idCardFrontUrl || anchorDesc.idCardBackUrl" disabled :limit="2" :value="[anchorDesc.idCardFrontUrl, anchorDesc.idCardBackUrl]"></upload>
        </div>
        <span v-show="!anchorDesc.idCardBackUrl && !anchorDesc.idCardFrontUrl">无</span>
      </a-descriptions-item> -->
    </a-descriptions>

    <!-- 操作 -->
    <template slot="footer">
      <slot name="footer" :row="anchorDesc"></slot>
    </template>
  </a-modal>
</template>
<script>
import { getAllUserList } from '@/service'
import debounce from 'lodash/debounce'
import upload from '@/components/upload/upload'
export default {
  name: 'auditDetail',
  props: {
    type: {
      type: Number,
      default: 0
    },
    value: {
      type: Boolean,
      default: false
    },
    anchorDesc: {
      type: Object,
      default: () => {}
    }
  },
  components: { upload },
  data() {
    this.getAllUserFun = debounce(this.getAllUserFun, 800)
    return {
      allUser: [],
      auditChannelManagerId: '',
      chooseId: undefined,
      userLoading: false
    }
  },
  mounted() {
    console.log(this.anchorDesc)
  },
  methods: {
    onCancel() {
      this.$emit('input', false)
    },
    choosePerson(e) {
      this.$emit('onChange', this.chooseId)
    },
    getAllUserFun(keywords) {
      return new Promise((resolve, reject) => {
        keywords = keywords.replace(/ /g, '')
        // if (!keywords) return reject(new Error('process'))
        this.userLoading = true
        getAllUserList({ keywords })
          .then((res = {}) => {
            const { records = [] } = res
            this.allUser = records
            resolve(res)
          })
          .catch(() => {
            return reject(new Error('接口出错'))
          })
          .finally(() => {
            this.userLoading = false
          })
      })
    }
  }
}
</script>
<style scoped lang="less">
/deep/ table tbody td div {
  margin-top: 0;
}
/deep/ .ant-select-selection__placeholder,
.ant-select-search__field__placeholder {
  margin-top: -10px;
}
/deep/ .ant-upload-list-picture-card .ant-upload-list-item {
  margin: 5px 0 0 0;
}
.img-top-box {
  display: flex;
  justify-content: flex-start;
  width: 550px;
  margin: -25px 0 0 85px;
}
</style>
